<template>
  <div>
    <a-modal v-model:visible="visible" title="自定义同步" @ok="handleOk">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="form"
      >
        <a-form-item label="设备ID" name="device_id">
          <a-input v-model:value="formState.device_id" />
        </a-form-item>
        <a-form-item label="网关ID/父ID" name="gateway_device_id">
          <a-input v-model:value="formState.gateway_device_id" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { customsyncdevice } from '/@/api/sys/gateway/gateway';
  export default defineComponent({
    emits: ['finishcustom'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();
      const visible = ref(false);
      const formRef = ref();
      const formState = reactive({
        id: '',
        device_id: '',
        gateway_device_id: '',
      });
      const rules = {
        device_id: {
          required: true,
          message: '设备id必填',
        },
        gateway_device_id: {
          required: true,
          message: '网关ID/父ID必填',
        },
      };
      function handleOk() {
        formRef.value.validate().then(() => {
          customsyncdevice(formState).then(() => {
            createMessage.success('同步设备成功');
            formRef.value.resetFields();
            visible.value = false;
            emit('finishcustom');
          });
        });
      }

      return {
        visible,
        handleOk,
        formRef,
        labelCol: { span: 8 },
        wrapperCol: { span: 12 },
        formState,
        rules,
      };
    },
  });
</script>

<style scoped>
  .form {
    margin: 30px 0px;
  }
</style>
